<template>
  <div>
    <el-dialog
      :title="'奖励信息'"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="visible"
      width="80%">
      <el-form :inline="true" :model="dataForm">
        <el-form-item label="起始时间">
          <el-date-picker
            v-model="dataForm.startTime"
            type="datetime"
            value-format = "yyyy-MM-dd HH:mm:ss"
            placeholder="起始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="dataForm.endTime"
            type="datetime"
            value-format = "yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="
          dataForm.keywords = ''
          dataForm.startTime = ''
          dataForm.endTime = ''
          getDataList()">重置</el-button>
          <el-button @click="getDataList()">查询</el-button>
          <el-button icon="el-icon-download" type="primary" @click="excel()">导出</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="dataList"
        :header-cell-style="tableHeaderColor"
        ref="table"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          prop="id"
          header-align="center"
          align="center"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="realName"
          header-align="center"
          align="center"
          label="获奖用户">
        </el-table-column>
        <el-table-column
          prop="rewardSource"
          header-align="center"
          align="center"
          label="奖励来源">
          <template slot-scope="scope">
            <label v-if="scope.row.rewardSource === 1">每日签到</label>
            <label v-if="scope.row.rewardSource === 2">累计签到</label>
            <label v-if="scope.row.rewardSource === 3">每日抽奖</label>
            <label v-if="scope.row.rewardSource === 4">每日任务</label>
            <label v-if="scope.row.rewardSource === 5">成长任务</label>
          </template>
        </el-table-column>
        <el-table-column
          prop="rewardType"
          header-align="center"
          align="center"
          label="奖品类型">
          <template slot-scope="scope">
            <label v-if="scope.row.rewardType === '1'">积分</label>
            <label v-if="scope.row.rewardType === '2'">优惠卷</label>
            <label v-if="scope.row.rewardType === '3'">商品</label>
          </template>
        </el-table-column>
        <el-table-column
          prop="rewardTime"
          header-align="center"
          align="center"
          label="获奖时间">
        </el-table-column>
        <el-table-column
          prop="rewardStatus"
          header-align="center"
          align="center"
          label="奖励状态">
          <template slot-scope="scope">
            <label v-if="scope.row.rewardStatus === 0">未发放</label>
            <label v-if="scope.row.rewardStatus === 1">已发放</label>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="220%"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="scope.row.rewardStatus === 0" @click="issueLogHandle(scope.row.id)">发放奖励</el-button>
            <el-button type="text" size="small" @click="toogleExpand(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <table border="1" width="100%">
              <tr>
                <th>用户电话</th>
                <th v-if="scope.row.userType != null">用户类型</th>
                <th v-if="scope.row.rewardType === '1'">积分</th>
                <th v-if="scope.row.rewardType === '2'">优惠卷名称</th>
                <th v-if="scope.row.rewardType === '3'">商品名称</th>
                <th v-if="scope.row.rewardType === '3'">商品图片</th>
                <th v-if="scope.row.rewardStatus === 1">联系方式</th>
                <th v-if="scope.row.rewardStatus === 1">联系地址</th>
                <th v-if="scope.row.rewardStatus === 1">物流单号</th>
              </tr>
              <tr>
                <td>{{scope.row.mobile}}</td>
                <td v-if="scope.row.userType === 1">区域运营商</td>
                <td v-if="scope.row.userType === 2">普通联盟店</td>
                <td v-if="scope.row.userType === 3">消费者（用户）</td>
                <td v-if="scope.row.userType === 4">VIP会员</td>
                <td v-if="scope.row.userType === 5">中级版联盟店</td>
                <td v-if="scope.row.userType === 6">高级版联盟店</td>
                <td v-if="scope.row.userType === 7">城市合伙人</td>
                <td v-if="scope.row.userType === 8">城市合伙人联盟店</td>
                <td v-if="scope.row.rewardType === '1'">{{scope.row.rewardItem}}</td>
                <td v-if="scope.row.rewardType === '2'">{{scope.row.title}}</td>
                <td v-if="scope.row.rewardType === '3'">{{scope.row.goodsName}}</td>
                <td v-if="scope.row.rewardType === '3'">{{scope.row.img}}</td>
                <td v-if="scope.row.rewardStatus === 1">{{scope.row.contactInformation}}</td>
                <td v-if="scope.row.rewardStatus === 1">{{scope.row.contactAddress}}</td>
                <td v-if="scope.row.rewardStatus === 1">{{scope.row.logisticsNumber}}</td>
              </tr>
            </table>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button @click="visible = false">确定</el-button>
      </span>
    </el-dialog>
    <issue-log-reward v-if="issueLogRewardVisible" ref="issueLogReward" @refschGetDataList="getDataList"></issue-log-reward>
  </div>
</template>

<script>
  import IssueLogReward from './issuelog-reward'
  export default {
    data () {
      return {
        show: false,
        issueLogRewardVisible: false,
        dataListSelections: '',
        selectionChangeHandle: '',
        dataListLoading: false,
        visible: false,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataForm: {
          startTime: '',
          endTime: '',
          type: ''
        }
      }
    },
    components: {
      IssueLogReward
    },
    methods: {
      getDataList () {
        debugger
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/userlog/queryUserLogList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pagesize,
            'startTime': this.dataForm.startTime,
            'endTime': this.dataForm.endTime
          })
        }).then(({data}) => {
          debugger
          console.log(data)
          if (data && data.code === 0) {
            this.dataList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.dataListLoading = false
            return null
          }
          this.visible = true
          this.dataListLoading = false
        })
        console.log(this.dataList)
      },
      issueLogHandle (id) {
        debugger
        this.issueLogRewardVisible = true
        this.$nextTick(() => {
          this.$refs.issueLogReward.init(id)
        })
      },
      toogleExpand (row) {
        debugger
        console.log(row)
        let $table = this.$refs.table
        $table.toggleRowExpansion(row)
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 修改table header的背景色
      tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: #909399;color: #303133;font-weight: 500;'
        }
      },
      excel () {
        window.location.href = this.$http.adornUrl(`/userlog/userlogExcel?token=${this.$cookie.get('token')}&startTime=${this.dataForm.startTime}&endTime=${this.dataForm.endTime}`)
      }
    }
  }
</script>
<style>
</style>
